<template>
  <div class="case-detail-page">
    <div class="form-card">
      <div class="form-section-title"><span class="section-bar"></span>基本信息</div>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="案件名称">{{ caseData.title }}</el-descriptions-item>
        <el-descriptions-item label="案件状态">{{ statusLabel(caseData.status) }}</el-descriptions-item>
        <el-descriptions-item label="案件类型">{{ typeLabel(caseData.type) }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ caseData.apply_time }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ caseData.applicantName }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="form-card">
      <div class="form-section-title"><span class="section-bar"></span>案件描述</div>
      <div class="desc-block">{{ caseData.description }}</div>
    </div>
    <div class="form-actions">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { mockDatabase } from '@/mock/modules/case'

const route = useRoute()
const router = useRouter()
const caseData = ref({})

function statusLabel(status) {
  const map = { 0: '待审核', 1: '审核通过', 2: '审核未通过', 3: '已结案', 4: '已撤回' }
  return map[status] || status
}
function typeLabel(type) {
  const map = { CIVIL: '民事案件', CRIMINAL: '刑事案件', ADMINISTRATIVE: '行政案件', OTHER: '其他' }
  return map[type] || type
}
function goBack() {
  router.back()
}
onMounted(() => {
  const id = route.params.id
  // 优先从localStorage获取allCases
  const cases = JSON.parse(localStorage.getItem('allCases') || '[]')
  const found = cases.find(item => String(item.id) === String(id))
  if (found) caseData.value = found
})
</script>
<style scoped>
.case-detail-page {
  padding-top: 48px;
  background: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-card, .form-actions {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  background: #fff;
  padding: 28px 32px 20px 32px;
}
.form-section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}
.section-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: #ffb300;
  border-radius: 2px;
  margin-right: 10px;
}
.desc-block {
  background: #f8fafd;
  border-radius: 8px;
  padding: 24px 32px;
  color: #333;
  font-size: 16px;
  min-height: 60px;
  text-align: center;
}
.form-actions {
  background: none;
  box-shadow: none;
  padding-bottom: 32px;
  margin-top: 0;
}
</style> 